<template>
	<view class="content" :style="'height: '+windowHeight+'px;'">
		<!-- <cu-custom bgColor="bg-my" :isBack="false">
			<block slot="content">中国消防救援</block>
		</cu-custom> -->
		<view class="nav_head_bg" style="height:30% ">
			<view>
				<text class="title">中国消防救援</text>
			</view>
			<view class="slogan">
				<text>对党忠诚</text>
				<text>纪律严明</text>
				<text>赴汤蹈火</text>
				<text>竭尽为民</text>
			</view>

		</view>
		<view class="hot" style="height:30% ">
			<view class="hotview" style="height:100% ">
				<view>
					<text class="hotTitle">热搜榜</text>
				</view>
				<view style="padding-top: 20rpx;">
					<text class="hotTitle2">山东总队党团群工作规范化汇报片</text>
				</view>
				<view>
					<text class="hotTitle2">重庆总队工作运行机制规范化汇报片</text>
				</view>
				<view>
					<text class="hotTitle2">江西总队执法规范化汇报片</text>
				</view>
				<view>
					<text class="hotTitle2">VR党团群组织规范化建设展区</text>
				</view>
				<view>
					<text class="hotTitle2">基层队站规范化建设</text>
				</view>
			</view>
		</view>
		<view style="height: 10%;background-color: #000000;">
		</view>
		<view class="bottomImg" style="height: 30%;">
			<view class="menus ">
				<!-- @touchstart="touchstart" -->
				<view class="">
					<view class="menuImg" @click.stop.prevent="click" @touchstart="touchstart($event,0)" @touchend="touchend($event,0)">
						<image class="btn" :style="'width: '+arr[0].width+'rpx;height: '+arr[0].height+'rpx;'" :src="ossUrl+'small.png'"
						 mode=""></image>
						<text class="" :style="'position: absolute;font-size: 5rpx;line-height: 28rpx;color:#EBEEF5;left: '+arr[0].left+'rpx;top: '+arr[0].top+'rpx;'">成果展示</text>
					</view>
				</view>

				<view class="menuBigImg" @touchstart="touchstart($event,1)" @touchend="touchend($event,1)">
					<image class="btn" :style="'width: '+arr[1].width+'rpx;height: '+arr[1].height+'rpx;'" :src="ossUrl+'big.png'"
					 mode=""></image>
					<text :style="'position: absolute;font-size: 34rpx;line-height: 43rpx;color:#EBEEF5;left: '+arr[1].left+'rpx;top: '+arr[1].top+'rpx;'">会议风采</text>

				</view>
				<view class="menuImg" @touchstart="touchstart($event,2)" @touchend="touchend($event,2)">
					<image class="btn" :style="'width: '+arr[2].width+'rpx;height: '+arr[2].height+'rpx;'" :src="ossUrl+'small.png'"
					 mode=""></image>
					<text class="" :style="'position: absolute;font-size: 5rpx;line-height: 28rpx;color:#EBEEF5;left: '+arr[2].left+'rpx;top: '+arr[2].top+'rpx;'">会议资料</text>


				</view>
			</view>
		</view>

	</view>

</template>

<script>
	import {
		request,
		ossUrl
	} from '../util/ajax.js'
	import {
		changeLastPage,
		checkPageLogin,
		checkPerms
	} from '../util/utils.js';
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				ossUrl: ossUrl,
				title: 'Hello',
				windowHeight: '',
				arr: [{
						width: 130,
						height: 129,
						left: 20,
						top: 50,
					},
					{
						width: 217,
						height: 212,
						left: 40,
						top: 90,
					},
					{
						width: 130,
						height: 129,
						left: 20,
						top: 50,
					},
				],
				f: false
			}
		},
		computed: {
			...mapState(['userInfo', 'sysUser', 'sysMenus']),

		},
		onLoad() {
			this.getSystemInfo();
		},
		onShow() {

		},
		methods: {
			click() {
				//this.f=!that.f;
			},
			touchstart(e, n) {
				console.log(e)
				let that = this;
				let t = setInterval(function() {
					console.log('touchstart')
					if (n == 0 || n == 2) {
						if (that.f) {
							clearInterval(t);
							return;
						}
						if (that.arr[n].width == 180) {
							clearInterval(t);
							return;
						}
						that.arr[n].width++;
						that.arr[n].height++;
						that.arr[n].left = that.arr[n].left + 0.4;
						that.arr[n].top = that.arr[n].top + 0.4;
					} else {
						if (that.arr[n].width == 267) {
							clearInterval(t);
							return;
						}
						that.arr[n].width++;
						that.arr[n].height++;
						that.arr[n].left = that.arr[n].left + 0.4;
						that.arr[n].top = that.arr[n].top + 0.4;
					}

				}, 20);
				setTimeout(function() {
					clearInterval(t);
				}, 1000)

			},
			touchend(e, n) {
				console.log(e)
				let that = this;
				let t = setInterval(function() {
					console.log('touchsend')
					if (n == 0 || n == 2) {
						if (that.arr[n].width == 130) {
							clearInterval(t);
							return;
						}
						that.arr[n].width--;
						that.arr[n].height--;
						that.arr[n].left = that.arr[n].left - 0.4;
						that.arr[n].top = that.arr[n].top - 0.4;
					} else {
						if (that.arr[n].width == 167) {
							clearInterval(t);
							return;
						}
						
						that.arr[n].width--;
						that.arr[n].height--;
						that.arr[n].left = that.arr[n].left - 0.4;
						that.arr[n].top = that.arr[n].top - 0.4;
					}

				}, 20);
				setTimeout(function() {
					clearInterval(t);
				}, 1000)

			},
			getSystemInfo() {
				let that = this;
				uni.getSystemInfo({
					success: function(e) {
						console.log(e)
						that.windowHeight = e.windowHeight;
					}
				})
			},
		}
	}
</script>

<style scoped>
	.btn {
		border: none
	}

	image::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
		background-size: 400%;
		opacity: 0;
		translation: .5s;
		border-radius: 50rpx;
		animation: animate 20s linear infinite;
		z-index: -1;
	}

	image::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
		background-size: 400%;
		opacity: 0;
		border-radius: 50rpx;
		translation: .5s;
		animation: animate 20s linear infinite;
		z-index: -1;
	}


	image:hover::before,
	image:hover::after {
		opacity: 1;
	}

	@keyframes animate {
		0% {
			background-position: 0 0;
		}

		50% {
			background-position: 300% 0;
		}

		100% {
			background-position: 0 0;
		}
	}

	page {
		height: 100%;
	}

	.content {
		height: 100%;
	}

	.menus {
		width: 600rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-content: center;
		align-items: center;
		position: relative;
	}

	.menuBigImg {

		position: relative;
	}

	.menuImg {
		position: relative;
	}

	.bottomImg {
		background-image: url('http://oss.91xiaokong.com/fireControl/bottom.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-color: #000000;
	}

	.hotTitle2 {
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFAFA;
		line-height: 65rpx;
	}

	.hotTitle {
		font-size: 38rpx;
		font-weight: bold;
		color: #FCF7E9;
		line-height: 39rpx;
	}

	.nav_head_bg {
		background-image: url('http://oss.91xiaokong.com/fireControl/na_head_bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-color: #000000;
	}

	.hot {
		background-color: #000000;
	}

	.hotview {
		margin: 0rpx auto;
		width: 582rpx;
		background: #333333;
		border-radius: 20px;
		padding-left: 30rpx;
		padding-top: 30rpx;
	}

	.title {
		width: 500rpx;
		color: #30A5FF;
		font-size: 64.07rpx;
		font-weight: 600;
		display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
		letter-spacing: 15rpx;
		line-height: 81.55rpx;
		margin: 0rpx auto;
		margin-bottom: auto;
		padding-top: 128rpx;
	}

	.slogan {
		width: 450rpx;
		color: #30A5FF;
		font-size: 23.12rpx;
		display: flex;
		justify-content: space-between;
		align-content: center;
		align-items: center;
		line-height: 29px;
		margin: 0 auto;
	}
</style>
